import { ReactElement, useRef, useState } from 'react'
import { Button, Space, message } from 'antd'
import style from './index.module.less'
import Search, { formatCondition } from './components/search'
import Table, { TableRef } from '@components/table'
import { PerformanceSchema } from '@src/components/schema/performanceSchema'
import { getColumn } from './util'
import { awaitWrap, confirmAction } from '@src/assets/js/tool'
import { getCaseListRequest, computeRequest } from './ajax'
import EditPerformance from './components/editPerformance'
import { useDispatch } from 'react-redux'


// 初始化数据
async function initData (data: { [k: string]: any}, setDataSource: (v: PerformanceSchema[]) => void, setTotal: (v: number) => void, setLoading: (v: boolean) => void): Promise<void> {
  setLoading(true)
  const [e, d] = await awaitWrap(getCaseListRequest({
    condition: formatCondition(data),
    page: data.page,
    limit: data.limit
  }))
  setLoading(false)
  if (e === null && d !== null) {
    setTotal(d.total)
    setDataSource(d.list)
  }
}

async function batchCompute (): Promise<void> {
  const hide = message.loading('计算中', 600)
  const [e] = await awaitWrap(computeRequest())
  hide()
  if (e === null) {
    message.success('计算成功').then(null, null)
  }
}

function addConfirm (setModifyData: (v: PerformanceSchema | null) => void, setVisible: (v: boolean) => void): void {
  confirmAction('请先确认考核人员考评方式有无变动！确认是否新增绩效考核？', () => {
    setModifyData(null)
    setVisible(true)
  })
}

function Main (): ReactElement {
  const dispatch = useDispatch()
  const tableRef = useRef<TableRef>(null)
  const [visible, setVisible] = useState(false)
  const [loading, setLoading] = useState(false)
  const [total, setTotal] = useState(0)
  const [dataSource, setDataSource] = useState<PerformanceSchema[]>([])
  const [modifyData, setModifyData] = useState<PerformanceSchema | null>(null)
  const [params, setParams] = useState<{[k: string]: any}>({})
  const refreshFn: () => void = async () => tableRef.current?.refreshData()
  return (
    <div className={style.container}>
      <EditPerformance visible={visible} data={modifyData} hide={() => { setModifyData(null); setVisible(false) }} refreshData={() => tableRef.current?.refreshData()} />
      <Search params={params} setParams={setParams} />
      <div className={style.table}>
        <div className={style['operate-line']}>
          <span className={style['operate-title']}>考核记录列表</span>
          <Space>
            <Button type='primary' ghost onClick={ async () => await batchCompute() }>批量算分</Button>
            <Button type='primary' onClick={() => { addConfirm(setModifyData, setVisible) }}>新建考核</Button>
          </Space>
        </div>
        <Table ref={tableRef} params={params} setParams={setParams} columns={getColumn(dispatch, setVisible, setModifyData, refreshFn)} loading={loading} total={total} dataSource={dataSource} onChange={async d => await initData(d, setDataSource, setTotal, setLoading)} />
      </div>
    </div>
  )
}

export default Main
